<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<%@taglib uri="http://www.bird.com" prefix="bird"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<bird:getTree></bird:getTree>
	<bird:sellTag></bird:sellTag>
<bird:indexTag></bird:indexTag>

	<head>
		<title>汽车零部件交易平台</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript"
			src="/Machine/js/jquery-1.7.2.js">
</script>
		<link rel="stylesheet" href="/Machine/css/index.css" type="text/css"></link>
		<link rel="stylesheet" type="text/css" href="/Machine/css/sell.css">
		<jsp:include page="header.jsp"></jsp:include>
		
		<script type="text/javascript" src="http://www.jsfoot.com/jquery/demo/2011-08-26/js/jquery.Xslider.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			// 焦点图片淡隐淡现
			$("#slider3").Xslider({
				affect:'fade',
				ctag: 'div'
			});
			
		});
		
		
		function tagsearch(obj){
				
				var tagNum = $(obj).children().html();
				var url = "/Machine/search/keySearch.action?tag="+tagNum+"&orderKey=type&keywords=";	
				window.location=url;
			}
		</script>

		

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
h3{font-size:16px;text-align:center;margin:20px 0;color:#ff6600;}
/* slidebox */
.slidebox{width:300px;height:250px;overflow:hidden;position:relative;border:solid 1px #ddd;margin:20px auto;}
.slidepic{position:absolute;}/* 必要元素 */
.slidepic li{height:250px;overflow:hidden;}
.slidebtn{position:absolute;bottom:10px;right:10px;float:right;}
.slidebtn li{background:#fff;border:1px solid #D00000;cursor:pointer;float:left;font-family:arial;height:18px;line-height:18px;width:18px;margin:4px;text-align:center;color:#D00000;}
.slidebtn li.current{background:#FF0000;border:1px solid #D00000;height:24px;line-height:24px;width:24px;margin:0 2px;color:#fff;font-weight:800;}
/* slidepic-01 */
.slidebox-01{width:300px;height:250px;overflow:hidden;position:relative;border:solid 1px #ddd;margin:20px auto;}
.slidepic-01{position:absolute;width:9999em;}/* 必要元素 */
.slidepic-01 li{height:250px;overflow:hidden;float:left;}
.slidebtn-01{position:absolute;bottom:10px;right:10px;float:right;}
.slidebtn-01 li{background:#fff;border:1px solid #D00000;cursor:pointer;float:left;font-family:arial;height:18px;line-height:18px;width:18px;margin:4px;text-align:center;color:#D00000;}
.slidebtn-01 li.current{background:#FF0000;border:1px solid #D00000;height:24px;line-height:24px;width:24px;margin:0 2px;color:#fff;font-weight:800;}
/* slides */
.slides{position:relative;width:300px;height:250px;overflow:hidden;margin:0 auto;border:solid 1px #ddd;}
.slide-pic{overflow:hidden;width:300px;}
.slide-pic li{display:none;}/* 必要元素 */
.slide-pic li.current{display:block;}/* 必要元素 */
.slide-li{left:0px;bottom:1px;position:absolute;}/* 必要元素 */
.slide-li li{float:left;width:154px;line-height:30px;margin-right:1px;height:30px;text-align:center;}
.slide-li a{display:block;font-size:14px;color:#fff;height:30px;text-decoration:none;}
.slide-li li.current a{color:#333;text-decoration:none;}
.op{filter:alpha(opacity=60);opacity:0.6;}
.op li{background:#666;}
.op li.current{background:#fff;}
</style>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Lucida,Verdana,Helvetica,sans-serif;}
/* quotation */
#new_info{width:190px;height:227px;overflow:hidden;text-align: left;}
#new_info li{line-height:20px;padding-bottom:10px;}
</style>
	</head>

	<body style="text-align: center;">


		<div class="m">
			<div class="placeHolder">
				供求信息
			</div>
			<table class="mytable">

				<tr>
					<td valign="top" class="lefttd">
						<div class="leftdiv">
							<div id="header" class="leftdivhead">
								汽车零部件最新查询
							</div>
						</div>
						<ul class="myul_2">
						
						<c:forEach items="${latestSearch }" var="item">
							<li>
								<a href="/Machine/search/keySearch.action?keywords=${item }">${item }</a>
							</li>
						</c:forEach>
						<!--  
							<li>
								<img width="3" height="3" src="/Machine/images/dot.gif">
								<a href="#">河南手动装轧盖机</a>
							</li>
							<li>
								<img width="3" height="3" src="/Machine/images/dot.gif">
								<a href="#">河南半自动液体灌装机</a>
							</li>
							<li>
								<img width="3" height="3" src="/Machine/images/dot.gif">
								<a href="#">河南口服液灌装轧盖机</a>
							</li>
							<li>
								<img width="3" height="3" src="/Machine/images/dot.gif">
								<a href="#">河南口服液灌装轧盖</a>
							</li>
							<li>
								<img width="3" height="3" src="/Machine/images/dot.gif">
								<a href="#">河南膏体自动灌装机</a>
							</li>
							<li>
								<img width="3" height="3" src="/Machine/images/dot.gif">
								<a href="#">推力轴承</a>
							</li>
							<li>
								<img width="3" height="3" src="/Machine/images/dot.gif">
								<a href="#">推力轴承</a>
							</li>-->
						</ul>

						<div class="leftdiv">
							<div id="header" class="leftdivhead">
								最新入住仓位供应商
							</div>
						</div>
						<ul class="myul_2">
						
						<c:forEach items="${publishers }" var="item">
								<li>
								<a href="#">${item}</a>
							</li>
						</c:forEach>
						<!-- 
							<li>
								<img width="3" height="3" src="/Machine/images/dot.gif">
								<a href="#">河南手动装轧盖机</a>
							</li>
							<li>
								<img width="3" height="3" src="/Machine/images/dot.gif">
								<a href="#">河南半自动液体灌装机</a>
							</li>
							<li>
								<img width="3" height="3" src="/Machine/images/dot.gif">
								<a href="#">河南口服液灌装轧盖机</a>
							</li>
							<li>
								<img width="3" height="3" src="/Machine/images/dot.gif">
								<a href="#">河南口服液灌装轧盖</a>
							</li>
							<li>
								<img width="3" height="3" src="/Machine/images/dot.gif">
								<a href="#">河南膏体自动灌装机</a>
							</li>
							<li>
								<img width="3" height="3" src="/Machine/images/dot.gif">
								<a href="#">推力轴承</a>
							</li>
							<li>
								<img width="3" height="3" src="/Machine/images/dot.gif">
								<a href="#">推力轴承</a>
							</li> -->
						</ul>

					</td>

					<td valign="top" class="lefttd2">
						<div class="centerContent">
							<!-- 这里是显示窗体部分的上一个头部分 -->
							<div id="header" class="messageleft1">
								零部件最新交易信息
							</div>
							<!-- 这里是显示供应内容的部分 -->
							<div id="new_info" class="leftcontent">
								<ul class="myul_1" >
								
								<c:forEach items="${endMes }" var="item">
									<li>·
										<a href="#">${item }</a>
									</li>
								</c:forEach>
								<!--  
									<li>·
										<a href="#">河南手动装轧盖机</a>
									</li>
									<li>
										·
										<a href="#">河南半自动液体灌装机</a>
									</li>
									<li>
										·
										<a href="#">河南口服液灌装轧盖机</a>
									</li>
									<li>
										·
										<a href="#">河南口服液灌装轧盖</a>
									</li>
									<li>
										·
										<a href="#">河南膏体自动灌装机</a>
									</li>
									<li>
										·
										<a href="#">推力轴承</a>
									</li>
									<li>
										·
										<a href="#">推力轴承</a>
									</li>
									<li>
										·
										<a href="#">河南手动装轧盖机</a>
									</li>
									<li>
										·
										<a href="#">河南半自动液体灌装机</a>
									</li>
									<li>
										·
										<a href="#">河南口服液灌装轧盖机</a>
									</li>
									<li>
										·
										<a href="#">河南口服液灌装轧盖</a>
									</li>
									<li>
										·
										<a href="#">河南膏体自动灌装机</a>
									</li>
									<li>
										·
										<a href="#">推力轴承</a>
									</li>
									<li>
										·
										<a href="#">推力轴承</a>
									</li>
									<li>
										·
										<a href="#">河南手动装轧盖机</a>
									</li>
									<li>
										·
										<a href="#">河南半自动液体灌装机</a>
									</li>
									<li>
										·
										<a href="#">河南口服液灌装轧盖机</a>
									</li>
									<li>
										·
										<a href="#">河南口服液灌装轧盖</a>
									</li>
									<li>
										·
										<a href="#">河南膏体自动灌装机</a>
									</li>
									<li>
										·
										<a href="#">推力轴承</a>
									</li>
									<li>
										·
										<a href="#">推力轴承</a>
									</li>
									-->
								</ul>
							</div>

						</div>
							<script type="text/javascript">
$(function() {
	var scrtime;
	$("#new_info").hover(function() {
		clearInterval(scrtime);

	}, function() {

		scrtime = setInterval(function() {
			var $ul = $("#new_info ul");
			var liHeight = $ul.find("li:last").height();
			$ul.animate( {
				marginTop : liHeight + 5 + "px"
			}, 1000, function() {

				$ul.find("li:last").prependTo($ul)
				$ul.find("li:first").hide();
				$ul.css( {
					marginTop : 0
				});
				$ul.find("li:first").fadeIn(1000);
			});
		}, 4000);

	}).trigger("mouseleave");
});
</script>
					</td>
					<td valign="top" class="lefttd2">

						<!-- 这里是公告栏中间部分 -->
						<div class="centerContent">
							<div id="header" class="messageleft1">
								优秀供应商推荐
							</div>
							<table width="100%" cellspacing="0" cellpadding="0">
								<tr style="background-color: #AACCEE">
									<td>
										产品名称
									</td>
									<td>
										订单号
									</td>
									<td>
										发布日期
									</td>
									<td>
										供货商
									</td>
								</tr>
								
								<c:forEach items="${better}" var="item">
								<tr>
									<td>
										${item.componentname }
									</td>
									<td>
										${item.dingdanhao }
									</td>
									<td>
										${item.publishtime }
									</td>
									<td>
										${item.gonghuoshang }
									</td>
									</tr>
								</c:forEach>
								<!--  
									<td>
										轴承
									</td>
									<td>
										123456
									</td>
									<td>
										2012-01-12
									</td>
									<td>
										轴承
									</td>-->
								
							</table>
						</div>
					</td>

				</tr>

			</table>

			<!-- 这里是公告栏部分 -->
			<!-- 这里是左侧的求购供应效果显示窗体部分 -->


			<!-- 这里是公告栏右侧部分登录注册部分 -->


		</div>
		<!-- 这里是推荐产品显示区域 -->
		<div class="m">

			<div class="placeHolder">
				产品介绍
			</div>

			<div class="tuijianhead" align="left">
				<ul>
					<li class="tuijiantab">
						推荐产品
					</li>
					<li style="text-align: right; margin-right: 100px; padding-top: 3px;">
						潜在仓位租赁供应商调查
					</li>
				</ul>
			</div>

			<div class="tuijianbody">
				<table width="100%">
				<tr align="center">
				<c:forEach items="${recommended }" var="item" begin="0" end="4" step="1">					
					<c:forEach items="${item }" var="anitem">
						<td width="20%" valign="top">
							<a href="/Machine/search/keySearch.action?keywords=${anitem.key.name }"><img width="100px" height="100px" alt="" src="${anitem.value }">
							</a> <div><font>${anitem.key.name }</font></div>
					</td>	
					</c:forEach>	
				</c:forEach>
				</tr>
				
				<tr align="center">
				<c:forEach items="${recommended }" var="item" begin="5" end="10" step="1">					
					<c:forEach items="${item }" var="anitem">
						<td width="20%" valign="top">
							<a href="/Machine/search/keySearch.action?keywords=${anitem.key.name }"><img width="100px" height="100px" alt="" src="${anitem.value }">
							</a> <div><font>${anitem.key.name }</font></div>
					</td>	
					</c:forEach>		
				</c:forEach>
				</tr>
				
				<!-- 
					<tr align="center">
						<td width="20%" valign="top">
							<a href="#"><img alt="" src="/Machine/resources/product1.jpg">
							</a> XX机械
						</td>

						<td width="20%" valign="top">
							<a href="#"><img alt="" src="/Machine/resources/product1.jpg">
							</a> XX机械
						</td>

						<td width="20%" valign="top">
							<a href="#"><img alt="" src="/Machine/resources/product1.jpg">
							</a> XX机械
						</td>

						<td width="20%" valign="top">
							<a href="#"><img alt="" src="/Machine/resources/product1.jpg">
							</a> XX机械
						</td>

						<td width="20%" valign="top">
							<a href="#"><img alt="" src="/Machine/resources/product1.jpg">
							</a> XX机械
						</td>
					</tr>


					<tr align="center">
						<td width="20%" valign="top">
							<a href="#"><img alt="" src="/Machine/resources/product1.jpg">
							</a> XX机械
						</td>

						<td width="20%" valign="top">
							<a href="#"><img alt="" src="/Machine/resources/product1.jpg">
							</a> XX机械
						</td>

						<td width="20%" valign="top">
							<a href="#"><img alt="" src="/Machine/resources/product1.jpg">
							</a> XX机械
						</td>

						<td width="20%" valign="top">
							<a href="#"><img alt="" src="/Machine/resources/product1.jpg">
							</a> XX机械
						</td>

						<td width="20%" valign="top">
							<a href="#"><img alt="" src="/Machine/resources/product1.jpg">
							</a> XX机械
						</td>
					</tr> -->
				</table>
			</div>

			<!-- 这里是最新加入会员名单 -->
			<div class="newUser">

				<div class="newUserBody">
		<div class="slidebox-01">
	<ul class="slidepic-01">
	
				<c:forEach items="${ads }" var="ad">
						
							<li><img width="300" height="250" src="${ad.value }" /></li>
						
					</c:forEach>
					<!--  
		<li><a href="http://www.jsfoot.com/jquery/items/2011-08-17/129.html"><img width="300" height="250" alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-17/9fae30738c94fb8e47dd2ba3e6003290.jpg" /></a></li>
		<li><a href="http://www.jsfoot.com/jquery/items/2011-08-15/124.html"><img width="300" height="250" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-15/c2081239df287adc9fff1cf991e62b2e.jpg" /></a></li>
		<li><a href="http://www.jsfoot.com/jquery/items/2011-08-09/112.html"><img width="300" height="250" alt="基于jquery 选项卡插件jquery tab选项卡支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换等。" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-09/ba66cb66d48ae5d3afd6567bde85a8c6.jpg" /></a></li>
		<li><a href="http://www.jsfoot.com/html5/items/2011-02-21/42.html"><img width="300" height="250" alt="jquery 幻灯片切换应用一个HTML5的幻灯片" src="http://www.jsfoot.com/d/file/html5/items/2011-02-21/5be1afce8d42e773d6eceba386d7189e.jpg" /></a></li>
		-->
	</ul>
	<div class="slidebtn-01">
		<ul>
			<li class="current">1</li>
			<li>2</li>
			<li>3</li>		
			<li>4</li>				
		</ul>
	</div>
</div><!--slidebox-01 end-->
				</div>
				<script type="text/javascript">
$(function(){
	
	// 图片上下翻滚
	var len = $('.slidebtn>ul>li').length;
	var index = 0;
	var autoplay;
	$('.slidebtn li').mouseover(function(){
		index = $('.slidebtn li').index(this);
		showImg(index);
	}).eq(0).mouseover();
	
	$('.slidebox').hover(function(){
		clearInterval(autoplay);
	},function(){
		autoplay = setInterval(function(){
			showImg(index)
			index++;
			if(index==len){
				index=0;
			}
		},3000);
	}).trigger('mouseleave');

	function showImg(index){
		var picheight = $('.slidebox').height();
		$('.slidepic').stop(true,false).animate({top:-picheight*index},600)
		$('.slidebtn li').removeClass('current').eq(index).addClass('current');
	};
	
	
	// 图片左右翻滚
	var size = $('.slidebtn-01>ul>li').length;
	var frist = 0;
	var datetime;
	$('.slidebtn-01 li').mouseover(function(){
		frist = $('.slidebtn-01 li').index(this);
		showpic(frist);
	}).eq(0).mouseover();
	
	$('.slidebox-01').hover(function(){
		clearInterval(datetime);
	},function(){
		datetime = setInterval(function(){
			showpic(frist)
			frist++;
			if(frist==size){
				frist=0;
			}
		},3000);
	}).trigger('mouseleave');

	function showpic(frist){
		var imgheight = $('.slidebox-01').width();
		$('.slidepic-01').stop(true,false).animate({left:-imgheight*frist},600)
		$('.slidebtn-01 li').removeClass('current').eq(frist).addClass('current');
	};
	
});

//图片淡隐淡现
var defaultOpts ={ interval:5000, fadeInTime:300, fadeOutTime:200 };

	var _titles = $("ul.slide-txt li");
	var _titles_bg = $("ul.op li");
	var _bodies = $("ul.slide-pic li");
	var _count = _titles.length;
	var _current = 0;
	var _intervalID = null;
	
	var stop = function(){
		window.clearInterval(_intervalID);
	};
	
	var slide = function(opts){
		if (opts){
			_current = opts.current || 0;
		} else{
			_current = (_current >= (_count - 1)) ? 0 :(++_current);
		};
		_bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime, function(){
			_bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
			_bodies.removeClass("current").eq(_current).addClass("current");
		});
		_titles.removeClass("current").eq(_current).addClass("current");
		_titles_bg.removeClass("current").eq(_current).addClass("current");
	}; 
	
	var go = function(){
		stop();
		_intervalID = window.setInterval(function(){
			slide();
		}, defaultOpts.interval);
	}; 
	
	var itemMouseOver = function(target, items){
		stop();
		var i = $.inArray(target, items);
		slide({ current:i });
	};
	
	_titles.hover(function(){
		if($(this).attr('class')!='current'){
			itemMouseOver(this, _titles);
		}else{
			stop();
		}
	}, go);

	_bodies.hover(stop, go);

	go();
	
</script>
			</div>
		</div>

		<!-- 这里是是产品分类的区域 -->
		<div class="m">
			<div class="placeHolder">
				行业类别
			</div>

			<div class="catalogbody">
				<div style="float: left; margin-bottom: 40px;">

							<table width="100%" cellpadding="0" cellspacing="0">
								<tbody>
									<tr>
									</tr>
									<c:forEach items="${list }" var="item" varStatus="allstatus">

										<tr>
											<c:forEach items="${item }" var="kind" varStatus="status">
												<c:if test="${status.index==1}">
													<tr>

													</tr>
												</c:if>
												<td>
													<c:if test="${status.index==0}">

														<a onclick="tagsearch(this);" class="type_a_big">${kind.key}<font
															style="display: none;">${kind.value}</font> </a>

													</c:if>
													<c:if test="${status.index!=0}">
														<a onclick="tagsearch(this);">${kind.key}<font
															style="display: none;">${kind.value}</font> </a>
													</c:if>

												</td>

											</c:forEach>

										</tr>

									</c:forEach>


								</tbody>

							</table>

						</div>
			</div>
			<!-- 这里是用户调查 -->
			<!-- 
			<div class="diaocha">
				您对于我们的网站满意吗
			</div>

 -->
		</div>
		<div class="m">

			<div class="placeHolder">
				广告推荐
			</div>
			<!-- 这里是广告栏 -->
			<table width="100%" cellspacing="0" cellpadding="0">
				<tr align="center">
					<!-- 这里是第一个广告 -->
					
					<td>
						<img alt="" src="/Machine/images/1.jpg" width="200" height="60">
					</td>

					<!-- 这里是第二个广告 -->
					<td>
						<img alt="" src="/Machine/images/2.gif" width="150" height="60">
					</td>

					<!-- 这里是第三个广告 -->
					<td>
						<img alt="" src="/Machine/images/3.gif" width="150" height="60">
					</td>

					<!-- 这里是第四个广告 -->
					<td>
						<img alt="" src="/Machine/images/3.gif" width="150" height="60">
					</td>


					<!-- 这里是第五个广告 -->
					<td>
						<img alt="" src="/Machine/images/3.gif" width="150" height="60">
					</td>


					<!-- 这里是第六个广告 -->
					<td>
						<img alt="" src="/Machine/images/3.gif" width="150" height="60">
					</td>

				</tr>
			</table>
		</div>
		<!-- 这里是广告栏和下面的公告栏之间的分割线 -->






		<jsp:include page="footer.jsp"></jsp:include>

	</body>
</html>
